﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>商城</title>
    <script src="~/js/jquery-2.2.4.min.js"></script>
    <style>
        .ulli li {
            float: left;
            display: inline;
            line-height: 50px;
            margin-left: 100px;
            color: #000;
            font-weight: bold;
        }

        .shopType{
            height: 40px;
            line-height: 40px;
            color: #FFF;
            width: 200px;
            text-align: center;
            text-indent: 20px;
        }

            .shopType:hover {
                height: 40px;
                line-height: 40px;
                color: #0fa0ec;
                width: 200px;
                background-color: #fff;
                text-align: center;
                text-indent: 20px;
            }
        .dtype {
            display: none;
            width: 300px;
            height: 100px;
            background-color: #fff;
            position: absolute;
            margin-left: 200px;
            margin-top: -57px;
        }
            .dtype a:link {
                text-decoration: none;
            }
        .dtype a:hover {
            color: #0fa0ec;
            text-decoration: none;
        }
        .typediv {
            background-color: #fff;
            width: 260px;
            height: auto;
            padding: 20px;
        }
        .bannerShow {
            background-size: 100% 100%;
            width: 600px;
            height: 300px;
            position: relative;
            transition: left 1s;
            -moz-transition: left 1s; /* Firefox 4 */
            -webkit-transition: left 1s; /* Safari and Chrome */
            -o-transition: left 1s; /* Opera */
        }
    </style>
</head>
<body style="padding: 0px; margin: 0px;font-family: 'Microsoft YaHei'; min-width: 1000px;">

    <div style="background-color:#f2f2f2;width:100%;height:30px; border-bottom: 1px solid #dedede;">
        <div style="margin:0 auto;width:921px;">
            <div style="float:left;">
                <span style="line-height:30px;font-size:12px;">您好，欢迎来到XX商城。</span>
            </div>
            <div style="float:right;">
                <span style="line-height:30px;font-size:12px;" onclick="window.location.href='/Admin/Index'">后台管理</span>
            </div>
        </div>
    </div>

    <div style="margin:0 auto;width:100%;height:165px;border-bottom:2px solid #0094e7;">

        <div style="margin:0 auto;width:921px;height:100px;">
            <div style="width:130px;height:100px;float:left;">
                <img src="~/img/logo.jpg" width="130" height="100" />
            </div>
            <div style="float:left;">
                <div style="float:left;margin-left:250px;margin-top:30px;">
                    <input type="text" placeholder="请输入商品名称或商品信息" style="width:300px;height: 30px; text-indent:8px;border: 1.5px solid #0094e7;border-radius: 4px 0 0 4px;outline: none;float:left;font-size:12px;" />
                    <input type="button" style="background:#0094e7 url(/img/sousuo.png); background-repeat: no-repeat; background-size:100% 100%;border: 1.5px solid #0094e7; border-radius: 0 4px 4px 0; width: 35px; height: 35px; text-align: center; color: #ffffff; outline: none;float:left; " />
                </div>
            </div>
            <div style="float:left;margin-left:148px;">
                <img src="~/img/gouwuche.png" style="width:30px;height:30px;margin-top:30px;margin-right:20px;" />
                <i style="width:30px;height:15px;border-radius:50%;background-color:#ffa940;display: block;position:relative;top:-40px;right:-15px;color:#fff;font-size:12px;text-align:center;">
                    1
                </i>
            </div>
        </div>

        <div style="margin:0 auto;width:921px;height:50px; ">
            <div style="float: left; background-color: #0094e7; width: 200px; border-top-left-radius: 3px; border-top-right-radius: 3px;">
                <p style="margin-left:25px;color:#fff;font-size:15px;text-indent:15px;">
                    <span style="display: inline-block; background: url(/img/caidan.png); width: 20px; height: 20px; background-repeat: no-repeat; background-size: 100% 100%; vertical-align: text-bottom;"></span>
                    全部商品分类
                </p>
            </div>
            <ul class="ulli" style="list-style-type: none;">
                <li>资讯中心</li>
                <li>XXXX</li>
                <li>XXXX</li>
            </ul>
        </div>

    </div>

    <div style="margin: 0 auto; width: 921px; cursor: default;">

        <div style="float: left; background-color: #0fa0ec;border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;" id="navType">
            <p class="shopType" datat="1"  onmouseover="mover(this)" onmouseout="mout(this)">数码三三四四</p>
            <div class="dtype" id="type1">
                <div  class="typediv">
                    <span style="color:#0fa0ec;font-weight:bold;">手机 ＞</span>
                    <div style="margin-top: 10px;font-weight: lighter;">
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <a href="#">xxxx</a>&nbsp;&nbsp;&nbsp;<span>|</span>
                    </div>
                </div>
            </div>
        </div>


        <div style="width:600px;height:300px;float:left;margin:10px;overflow:hidden;">
            <div id="banner1" class="bannerShow" style="background-image:url(http://dwz.win/F7x);top:0px;left:-600px;"></div>
            <div id="banner2" class="bannerShow" style="background-image:url(http://dwz.win/F75);top:-300px;left:0px;"></div>
            <div id="banner3" class="bannerShow" style="background-image:url(http://dwz.date/aBq5);top:-600px;left:600px;"></div>
        </div>

    </div>
    






    <script>
        $(function () {
            $.get("/Shop/CommodityType", function (msg) {
                var html = '';
                console.log(msg);
                var type = msg.data;
                var type0 = JSON.parse(JSON.stringify(type.filter((item) => { return item.parentId == 0 })));
                for (var i = 0; i < type0.length; i++) {
                    html += '<p class="shopType" datat="' + type0[i].id + '"  onmouseover="mover(this)" onmouseout="mout(this)">';
                    html += type0[i].name + '</p><div class="dtype"  onmouseover="dmover(this)" onmouseout="dmout(this)" id="type' + type0[i].id + '">';
                    var type1 = JSON.parse(JSON.stringify(type.filter((item) => { return item.parentId == type0[i].id })));
                    console.log(type1);
                    for (var y = 0; y < type1.length;y++)
                    {
                        if (y == 0) html += '<div  class="typediv" style="border-top: 1px solid #dedede;box-shadow: 1px 1px 0px 1px #bebebe;">';
                        //else if (y == type1.length - 1) html += '<div  class="typediv" style="box-shadow: 1px 1px 2px 1px #bebebe;">';
                        else html += '<div  class="typediv" style="box-shadow: 1px 1px 0px 1px #bebebe;">';

                        html += '<span style="color:#0fa0ec;font-weight:bold;">' + type1[y].name + ' ＞</span >';
                        var type2 = JSON.parse(JSON.stringify(type.filter((item) => { return item.parentId == type1[y].id })));
                        if (type2.length > 0) {
                            html += '<div style="margin-top: 10px; border-top: 1px solid #e3e3e3; font-weight: lighter;">';
                        }
                        for (var j = 0; j < type2.length; j++) {
                            if (j == 0) {
                                html += '<a href="#">' + type2[j].name + '</a>';
                            } else {
                                html += '&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;<a href="#">' + type2[j].name+'</a>';
                            }
                        }
                        if (type2.length > 0) {
                            html += '</div>';
                        }
                        html += '</div>';
                    }
                    html += '</div></div>';
                }
                $("#navType").html(html);
            });
            

        });
        var data = 0;
        function mover(e) {
            data = $(e).attr("datat");
            $("#type" + data).css("display", "block");
        }
        function mout(e) {
            $("#type" + data).css("display", "none");
        }
        function dmover(e) {
            $(e).css("display", "block");
        }
        function dmout(e) {
            $(e).css("display", "none");
        }


        var bannerCount = 3;
        var bannerHeight = 300;
        var bannerWidth = 600;
        var bannerIndex = 1;
        function bannerTime() {
            //console.log(bannerIndex);
            for (var i = 1; i <= bannerCount; i++) {
                var left = $("#banner" + i).css("left");
                left = left.replace("px", "");
                //console.log(left);
                $("#banner" + i).css("left", left - bannerWidth + "px");
                $("#banner" + i).css("z-index", "999999");
            }
            $("#banner" + bannerIndex).css("left", (bannerCount - 2) * bannerWidth + "px");
            $("#banner" + bannerIndex).css("z-index", "0");
            if (bannerIndex == bannerCount) bannerIndex = 1;
                else bannerIndex += 1;
        }
        window.setInterval(bannerTime, 3333); 
    </script>
</body>
</html>
